<template>
<<<<<<< HEAD
    <h1>班级列表</h1>
</template>

<script setup>
</script >
<style lang="less" scoped>
=======
<div>
    <div class="container">
		<div class="handle-box">
			<el-input class="handle-input" v-model="form.c_num" placeholder="班级编号"/>
			<el-input class="handle-input" v-model="form.c_name" placeholder="班级名称"/>
            <el-input class="handle-input" v-model="form.c_org" placeholder="所属机构">
                <template #append>
                    <el-select v-model="form.c_org" style="width: 44px;" :suffix-icon="CaretBottom">
                    <el-option
                        v-for="item in options.organizations"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        />
			</el-select>
                </template>
            </el-input>
            <el-input class="handle-input" v-model="form.c_branch" placeholder="所属分支">
                <template #append>
                    <el-select v-model="form.c_branch" style="width: 44px;" :suffix-icon="CaretBottom">
                        <el-option
                        v-for="item in options.branch"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        />
                    </el-select>
            </template>
                </el-input>
            <el-input class="handle-input" v-model="form.c_dir" placeholder="专业方向">   
                <template #append>          
                    <el-select  v-model="form.c_dir" style="width: 44px;" :suffix-icon="CaretBottom">
                        <el-option
                        v-for="item in options.branch"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        />
                    </el-select>
            </template>   
			</el-input>
				<el-button color="#0ab394" class="handle-btn"  @click="handleSearch">查询</el-button>
				<el-row class="top-btn">
     			<!-- <el-button-group class="ml-4"> -->
                    <el-button color="#0ab394"  @click="open">添加</el-button> 
                    <el-button color="#e35148" @click="handleAllDelete">删除</el-button>                         
       		 <!-- </el-button-group> -->
			</el-row>
			</div>
			<el-table ref="multipleTableRef" 
				:header-cell-style="{color:'#2A62BC'}"
			 	:data="tableData"   
			 	style="width: 100%;" 
			 	height="380"
                size="small"
                border
				@selection-change="handleSelectionChange">
                <el-table-column   type="selection" width="35" />
				<el-table-column  prop="c_num" label="班级编号"  ></el-table-column>
				<el-table-column prop="c_name" label="班级名称"></el-table-column>
                <el-table-column prop="c_dir" label="专业方向"></el-table-column>
                <el-table-column prop="c_org" label="所属机构"></el-table-column>
                <el-table-column prop="c_branch" label="所属分支"></el-table-column>
                <el-table-column prop="c_starttime" label="开始时间"></el-table-column>
                <el-table-column prop="c_endtime" label="结束时间"></el-table-column>
				<el-table-column label="是否启用" width="65">
                    <template #default="scope">
                        <el-switch
                                v-model="scope.row.isUse"
                                :active-value="1"
                                :inactive-value="0"
                                active-color="#64bd63"
                                inactive-color="#c0c0c0"
                                @change="changeSwitch(scope.row.isUse)"/>
					</template>
                </el-table-column>
				<el-table-column label="操作" width="280" align="center" >
					<template #default="scope">
						<el-row class="right-btn">
						    <el-button color="#0ab394" :icon="Edit" @click="open(scope.$index,scope.row)" >修改</el-button>
				            <el-button color="#e35148" :icon="Delete"  @click="handleDelete(scope.$index)" >删除</el-button>
				            <el-button color="#0AB394"  @click="openStu(scope.row)">
                                <i class="iconfont icon-yonghu3 white"></i>
                                学生管理</el-button>
                                <!-- type="success" -->
				            <el-button color="#23c6c8" style="color: #fff;"   @click="openResource(scope.$index)">
                                <i class="iconfont icon-th4 white"></i>
                                资源</el-button>
						</el-row>
						<!-- </el-button-group> -->
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div class="pagination">
				<el-pagination
				:current-page="query.pageIndex"
					:page-size="query.pageSize"
					:page-sizes="[5, 10, 15, 20]"
					size="small"
					layout="total, sizes, prev, pager, next, jumper"
					:total="pageTotal"
					@size-change="handleSizeChange"
					@current-change="handlePageChange"/>
			</div>
	</div>

		<!-- 修改/添加弹出框 -->
		<el-dialog :title="titleEdit" v-model="editVisible" width="30%" >
			<el-form label-width="75px">
				<el-form-item label="班级编号:" >
					<el-input v-model="form.c_num"  ></el-input>
				</el-form-item>
				<el-form-item label="班级名称:" >
					<el-input v-model="form.c_name"  ></el-input>
				</el-form-item>
				<el-form-item label="所属机构:">
                    <el-input class="dialog-input" v-model="form.c_org" >
                        <template #append>
                            <el-select v-model="form.c_org" style="width: 44px;" :suffix-icon="CaretBottom">
                                <el-option
                                    v-for="item in options.organizations"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    />
                             </el-select>
                        </template>
                    </el-input>
				</el-form-item>
				<el-form-item label="所属分支:">
                    <el-input class="dialog-input" v-model="form.c_branch">
                        <template #append>
                            <el-select v-model="form.c_branch" style="width: 44px;" :suffix-icon="CaretBottom">
                                <el-option
                                v-for="item in options.branch"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                />
                            </el-select>
                        </template>
                </el-input>
				</el-form-item>
				<el-form-item label="专业方向:">
                    <el-input class="dialog-input" v-model="form.c_dir" >   
                        <template #append>          
                            <el-select  v-model="form.c_dir" style="width: 44px;" :suffix-icon="CaretBottom">
                                <el-option
                                v-for="item in options.branch"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                />
                            </el-select>
                        </template>   
                    </el-input>
				</el-form-item>
                <el-form-item label="设置方案:">
                    <el-input class="dialog-input" v-model="form.c_dir"   >
                        <template #append>          
                            <el-select  v-model="form.c_dir" style="width: 44px;" :suffix-icon="CaretBottom">
                                <el-option
                                v-for="item in options.schemas"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                />
                            </el-select>
                        </template>   
                    </el-input>
				</el-form-item>

                <el-form-item label="分配教师:">
					<el-input v-model="form.teacher" placeholder=""></el-input>
				</el-form-item>

                <el-form-item >
					<el-table :data="form.courseList"
                    size="small"
                    :header-cell-style="{color:'#2A62BC'}"
                    border 
                    width="100%">
                      <el-table-column label="课程编号" prop="num"></el-table-column>
                      <el-table-column label="课程名称" prop="name"></el-table-column>
                    </el-table>
				</el-form-item>
                <el-form-item label="时间范围:" >
					<el-date-picker type="daterange"  start-placeholder="Start Date"
                         end-placeholder="End Date"
                        :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]">
                    </el-date-picker>
				</el-form-item>
				<el-form-item label="是否启用:" v-if="isAdd">
                    <el-input class="dialog-input" v-model="form.isUse"  >
                        <template #append>          
                            <el-select  v-model="form.isUse" style="width: 44px;" :suffix-icon="CaretBottom">
                                <el-option :label="'启用'" :value="'启用'"></el-option>
                                <el-option :label="'不启用'" :value="'不启用'"></el-option>
                            </el-select>
                        </template>   
                    </el-input>
				</el-form-item>
                <el-form-item label="班级介绍:">
					<el-input v-model="form.c_desc" type="textarea"
                    placeholder="乐码学员,JavaEE企业级开发人才培养">
                    </el-input>
				</el-form-item>

			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button color="#0ab394" @click="editVisible = false">关闭</el-button>
					<el-button color="#0ab394" @click="saveEdit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 学生管理弹出框 -->
		<el-dialog title="学生管理" v-model="studentVisible" width="650" >
		 <stu-manger></stu-manger>
			<template #footer>
				<span class="dialog-footer">
					<el-button color="#0ab394" @click="studentVisible = false">关闭</el-button>
					<el-button color="#0ab394" @click="studentVisible = false">确 定</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 资源弹出框 -->
		<el-dialog title="资源管理" v-model="resVisible" width="675" >
			<Resources></Resources>
			<template #footer>
				<span class="dialog-footer">
					<el-button color="#0ab394" @click="resVisible = false">关闭</el-button>
					<el-button color="#0ab394" @click="resVisible = false">确 定</el-button>
				</span>
			</template>
		</el-dialog>

		<!-- </div> -->
	</div>
</template>

<script setup >
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Delete, Edit, Search, CaretBottom } from '@element-plus/icons-vue';
import { getClazzList,getShowClazz} from '../../api/clazz' ;
import StuManger from './StuManger.vue'
import Resources from './Resources.vue';

const value = ref()
const value1 = ref()

const options = reactive({
organizations:[
	{
		value: '天龙八部',
		label: '天龙八部',
 	 },
  {
    value: '神雕侠侣',
    label: '神雕侠侣',
  },
  {
    value: '仙剑奇侠传',
    label: '仙剑奇侠传',
  },
  {
    value: 'flyme',
    label: 'flyme',
  },
  ],
  branch:[{
    value: '英语',
    label: '英语',
 	 },
  {
    value: '书法',
    label: '书法',
  },
  {
    value: '钢琴',
    label: '钢琴',
  },
  {
    value: 'flyme',
    label: 'flyme',
  },],
  
  dirs:[{
    value: '英语',
    label: '英语',
 	 },
  {
    value: '书法',
    label: '书法',
  },
  {
    value: '钢琴',
    label: '钢琴',
  },
  {
    value: 'flyme',
    label: 'flyme',
  },],
  schemas:[{
    value: 'JAVA',
    label: 'JAVA',
 	 },
  {
    value: 'Android',
    label: 'Android',
  },
  {
    value: 'mysql',
    label: 'mysql',
  },],
  
}
)
	
//分页字体
const small = ref(true)
// const size = ref<'default' | 'large' | 'small'>('default')

//分页数据
const query = reactive({
	pageIndex: 1,
	pageSize: 5,
});
//

//表格数据
const tableData = ref();
//总页数
const pageTotal = ref(0);
const multipleTableRef = ref()
const state = reactive({
	multipleSelection:[]
})

// 获取表格数据  分页是数据截取  后台结合一起后  直接返回分页的后的数据
const getData = () => {
    getClazzList({pageCurrent:query.pageIndex,pageSize:query.pageSize}).then(res=>{
        console.log(res,"---res---")
        // tableData.value = res.data.
		let start  = (query.pageIndex-1)*query.pageSize;//开始位置
        let end =query.pageIndex*query.pageSize  ;//结束位置 数组的截取的时候 [start,end) suo所以不用-1
        tableData.value = res.data.slice(start,end);
        // tableData.value = res.data;
        pageTotal.value = res.data.length
    })
    getShowClazz().then(res=>{
        form.courseList = res.data
        // console.log('courseList>>',form.courseList)
    })
	
};
getData();
//多选框权限
const handleSelectionChange = (val) => {
  state.multipleSelection = val
}
// 分页导航
const handleSizeChange = (val) => {
  // console.log(`${val} items per page`)
  query.pageSize = val;
  getData()
}
const handlePageChange = (val) => {
	query.pageIndex = val;
	console.log(val,"==")
	console.log(query.pageSize)
	getData()
};


//是够启用调用后台接口
const  changeSwitch=(status)=>{
    //调用后台修改接口
    console.log(status,'>>>status');
}

// 删除单个操作
const handleDelete = (index) => {
	// 二次确认删除
	ElMessageBox.confirm('确定要删除吗？', '提示', {
		type: 'warning'
	})
	.then(() => {
		ElMessage.success('删除成功');
		//to 传递id 到后台 
		tableData.value.splice(index, 1);
		// 删除成功后
		// getData()
	})
	.catch(() => {});
};
//删除多个数据  to......
const handleAllDelete =()=>{
	// console.log('删除多个')
	console.log(state.multipleSelection,'===拿到所有选择的数据====')
	if (state.multipleSelection.length==0) {
		ElMessage.error('请选择项')
		return
  	}
	// console.log(state.multipleSelection.map(item=>item.id))
	//axios删除的操作
	// deleteAllAdmin({ids:state.multipleSelection.map(item=>item.id)})

	
}


// 查询操作  to... 需要自己实现与后台交互
const handleSearch = () => {
	query.pageIndex = 1;
	getData();
};

// 表格编辑时弹窗和保存
const editVisible = ref(false);
let form = reactive({
    id:'',
    c_num:'', 
    c_name:'' ,
    c_org:'' ,
    c_branch:'',
    c_starttime:'' ,
    c_endtime: '',
    c_dir:'',
    isUse:'',
    teacher:'',
    courseList:[],
    c_desc:''
});

// 
let titleEdit = ref('修改')
let isAdd = ref(true)
const open  = (index,row)=>{//index是时间源对象
	if(row){
		titleEdit.value = "修改"
		handleEdit(index,row)
        isAdd.value=false
	}else{
		//把第一个输出改为可编辑
		isAdd.value=true
		//清空表单中的数据form.
		titleEdit.value = "添加";
		form.c_num=''
        form.c_name='' 
        form.c_org='' 
        form.c_branch=''
        form.c_starttime='' 
        form.c_endtime= ''
		editVisible.value = true	
	}
	console.log('-------测试传值-------')
	// console.log(index,row,index.target.innerText)
	// console.log(index,row)
	// console.log('================')

}
let idx = -1;
const handleEdit = (index,row) => {
	idx = index;
    form.id = row.id;
	form.c_num=row.c_num
    form.c_name=row.c_name
    form.c_org=row.c_org
    form.c_branch=row.c_branch
    form.c_starttime=row.c_starttime
    form.c_endtime=row.c_endtime
	editVisible.value = true;
};
//保存添加或者修改的数据 ---需要重新实现
const saveEdit = () => {
	editVisible.value = false;
	ElMessage.success(`修改第 ${idx + 1} 行成功`);
	tableData.value[idx].c_name = form.c_name;
	tableData.value[idx].c_num= form.c_name;
    tableData.value[idx].c_org = form.c_org;
};

//打开学生管理的弹窗
const  studentVisible = ref(false)
const  openStu = (row)=>{
    studentVisible.value = true

}

//打开资源的弹窗
const  resVisible= ref(false)
const  openResource = (index)=>{
    resVisible.value = true
}


</script >
<style lang="less" scoped>
.el-input-group__append{
    background-color: #fff;
}
.handle-box {
	margin-bottom: 20px;   
	.handle-btn{
		margin-left: 8px;
	}
    // .input-with-select {
    //     .el-input-group__prepend{
    //         background-color: #fff;
    // }
    //     }
       
}

// .el-select {
// 	width: 200px;
// 	// margin-right: 10px;  
// }

.handle-input {
	width:165px;
    margin-right: 8px;
}
.label{
   display: inline-block;
   max-width:100%;
   margin: 5px;
   font-weight: 700; 
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #F56C6C;
}
.blue {
	color: #1296e2;
	font-weight: bold;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
.cell{
    display: inline-block;
    .el-button{
        margin-left: 0px;
    }
}
.el-col {
  border-radius: 4px;
  margin-left: 10px;
}
.el-button-group{
    float: right;
}
.top-btn{
	float: right;
	.el-button{
		margin-left: 5px;
	}
}
.right-btn{
 	justify-content:center;
	.el-button{
		height: 21px;
		// width: 60px;
		margin-right: 6px;
		padding: 1px 5px;
        font-size: 12px;
	}
}


>>>>>>> c088509ecc2282a34d0b932f6925d649261c336d
</style>